<template>
  <div>
    <el-dialog class="select-prod" title="选择装备" :visible.sync="selectprodVis" @close="close" width="900px" append-to-body :close-on-click-modal='false'>
        
        <el-row :gutter="16" style="line-height:40px">
          <!-- <el-col :span="1">
            <div class="label-wrap category">
              <label for="">类别：</label>
            </div>
          </el-col>
          <el-col :span="4">
            <el-select v-model="categoryvalue" placeholder="请选择" style="width:100%"  size="small">
              <el-option
                v-for="item in goods_category"
                :key="item.id"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
          </el-col> -->

          <el-col :span="1">
            <div class="label-wrap category">
              <label for="">编号：</label>
            </div>
          </el-col>
          <el-col :span="5">
            <el-input v-model="prod_code" size="small" placeholder="请输入编号" style="width:100%"></el-input>
          </el-col>

          <el-col :span="1">
            <div class="label-wrap category">
              <label for="">名称：</label>
            </div>
          </el-col>
          <el-col :span="5">
            <el-input v-model="prod_name" size="small" placeholder="请输入名称" style="width:100%"></el-input>
          </el-col>

          <!-- <el-col :span="1">
            <div class="label-wrap category">
              <label for="">库位：</label>
            </div>
          </el-col>
          <el-col :span="4">
            <el-select v-model="categoryvalue" placeholder="请选择" style="width:100%"  size="small">
              <el-option
                v-for="item in goods_category"
                :key="item.id"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
          </el-col> -->

          <el-col :span="3">
            <el-button type="primary" size="mini" style="width:100%" @click="searchProd">搜索</el-button>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-table ref="prodInfos" :data="tableData" border style="width: 100%" @selection-change="selectProd">
              <el-table-column type="selection" width="40"></el-table-column>
              <el-table-column label="图片" width="60">
                <template slot-scope="scope">
                  <div>
                    <img style="width:40px;height:40px;" :src="scope.row.prodImg" alt="">
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="prodName" label="名称" width="100"></el-table-column>
              <el-table-column prop="prodCode" label="装备编号"></el-table-column>
              <el-table-column prop="categoryName" label="装备类别"></el-table-column>
              <el-table-column prop="prodSpecial" label="规格" width="50"></el-table-column>
              <el-table-column prop="emit" label="单位" width="50"></el-table-column>
              <!-- <el-table-column prop="supplier_code" label="供应商编号"></el-table-column> -->
              <el-table-column prop="supplierName" label="供应商名称"></el-table-column>
            </el-table>
          </el-col>
        </el-row>

      <el-row>
        <el-col :span="24">
          <el-pagination
            class="pull-left"
            background
            :page-sizes="[10]"
            layout="total, prev, pager, next"
            :total="30">
          </el-pagination>
        </el-col>
      </el-row>

        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="close">取 消</el-button>
          <el-button size="small" type="primary" :loading="submitLoading" @click="selectprodSuccess()">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { GetProduct, SelectByProdInfo } from '@/api/prod';
export default {
  name: 'selectprod',
  props: ['selectprodDialog'],
  data() {
    return {
      selectprodVis: false,
      submitLoading: false,
      formLabelWidth: '90px',
      categoryvalue: '',
      prod_code: '',
      prod_name: '',
      goods_category: [
        { id: 1, name: '分类1' },
        { id: 2, name: '分类2' },
        { id: 3, name: '分类3' },
      ],
      searchOptions: [
        { label: '名称', value: 'name'},
        { label: '编号', value: 'code'},
      ],
      selectedProd: [],
      tableData: []
    }
  },
  mounted() {
    this.$store.commit('ware/SET_SELECTPROD', []);
    this.getProducts();
  },
  methods: {
    close() {
      this.selectprodVis = false;
      this.$emit("update:selectprodDialog", false);
      this.$store.commit('ware/SET_SELECTPROD', []);
    },
    // 获取所有商品信息
    getProducts() {
      GetProduct().then( response => {
        let data = response.data;
        this.tableData = data;
      }).catch( error => {
        console.log(error)
      })
    },
    // 搜索商品
    searchProd() {
      let reqData = {
        prodCode: this.prod_code,
        prodName: this.prod_name,
      }
      SelectByProdInfo(reqData).then( res => {
        this.tableData = res.data.info
      })
    },
    // 选择商品
    selectProd(val) {
      this.selectedProd = val;
    },
    selectprodSuccess() {
      this.$store.commit('ware/SET_SELECTPROD', this.selectedProd);
      this.selectprodVis = false;
      this.$emit("update:selectprodDialog", false);
      this.$refs.prodInfos.clearSelection()
    },
  },
  watch: {
    selectprodDialog(newVal,oldVal) {  
      this.selectprodVis = newVal;
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../styles/config.scss';

  .label-wrap {
    &.category { @include labelwrap(left,50,40); }
    &.date {
      @include labelwrap(center,50,40); }
    &.keyword { @include labelwrap(right,110,40); }
  }
  .autospace {
    height: 30px;
  }
  
</style>